import Cookie from 'js-cookie'
export default {
  state: {
    isCollapse: false,
    menu: [],
    currentMenu: {},
    tabList: [
      {
        path: '/',
        name: 'home',
        label: '首页',
        icon: 'home',
      },
    ],
  },
  mutations: {
    setMenu(state, val) {
      state.menu = val
      Cookie.set('menu', JSON.stringify(val))
    },
    clearMenu(state) {
      state.menu = []
      Cookie.remove('menu')
    },
    addMenu(state, router) {
      console.log('addMenu')
      if (!Cookie.get('menu')) {
        return
      }
      let menu = JSON.parse(Cookie.get('menu'))
      state.menu = menu
      let currentMenu = [
        {
          path: '/',
          component: () => import(`@/views/Main`),
          children: [],
        },
      ]
      menu.forEach((item) => {
        if (item.children) {
          item.children = item.children.map((item) => {
            // ES6新增了字符串模板，在拼接大段字符串时，用反斜杠（``）
            // 取代以往的字符串相加的形式，能保留所有空格和换行，
            // 使得字符串拼接看起来更加直观、更加优雅。
            item.component = () => import(`@/views/${item.url}`)
            return item
          })
          // ES6新增的扩展运算符（...）可以轻松的实现数组和松散序列的相互转化，
          // 可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。
          // （尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，
          // 但是扩展运算符的逆运算却可以返回一个真正的数组）。
          // 扩展运算符还可以轻松方便的实现数组的复制和解构赋值（let a = [1,2,3];let b = [...a]）
          currentMenu[0].children.push(...item.children)
        } else {
          item.component = () => import(`@/views/${item.url}`)
          currentMenu[0].children.push(item)
        }
      })

      //router.addRoutes
      // 函数签名：
      // router.addRoutes(routes: Array<RouteConfig>)
      // 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
      router.addRoutes(currentMenu)
    },
    selectMenu(state, val) {
      // val.name === 'home'
      //   ? (state.currentMenu = null)
      //   : (state.currentMenu = val)

      if (val.name !== 'home') {
        state.currentMenu = val
        let result = state.tabList.findIndex((item) => item.name === val.name)
        result === -1 ? state.tabList.push(val) : ''
      } else {
        state.currentMenu = null
      }
    },
    getMenu(state) {
      console.log('getMenu')
      if (Cookie.get('tagList')) {
        let tagList = JSON.parse(Cookie.get('tagList'))
        state.tabsList = tagList
      }
    },
    closeTab(state, val) {
      let result = state.tabList.findIndex((item) => item.name === val.name)
      // splice(index) ——> 从index的位置开始，删除之后的所有元素(包括第index个)
      // 若 index < 0 , 则删除最后-index个元素
      // splice()函数返回删除元素数组

      // splice(index,howmany) ——> 删除从index位置开始的数，howmany为删除的个数
      // 若 howmany 小于等于 0，则不删除

      // <script type="text/javascript">
      //   var array = [0,1,2, 3,4,5, 6]
      //   document.write("原数组为:"+array +"<br />")
      //   var result = array.splice(2,1)
      //   document.write("array.splice(2,1)的结果为:",array + "<br />")
      //   document.write("删除的内容为:",result)
      // </script>

      // 原数组为: 0,1,2,3,4,5,6
      // array.splice(2,1)的结果为: 0,1,3,4,5,6
      // 删除的内容为: 2

      state.tabList.splice(result, 1)
    },
    collapseMenu(state) {
      state.isCollapse = !state.isCollapse
    },
  },
  actions: {},
}
